<template>
	<view class="columnbox wdh-100 content">
		<view class="columnbox top-box">
			<view class="rowbox search-box">
				<u-icon name="search" size="32rpx"></u-icon>
				<input confirm-type="search" @confirm="searchInfo" v-model="phone" placeholder="取件码" />
			</view>
			<view class="tab-content rowbox wdh-100 spb">
				<view class="tab-box">
					<u-tabs @change="changeType" :list="tablist"></u-tabs>
				</view>
				<!-- <view class="count-title">明细统计</view> -->
			</view>
		</view>
		<!-- 	<view class="rowbox time-box">
			<view>2023年11月27日</view>
			<view>共1笔订单</view>
		</view> -->
		<view class="columnbox one-box" v-for="(item,index) in list" :key='index'>
			<view class="columnbox order-detail">
				<view class="wdh-100 rowbox jus">
					<view class="rowbox daodian-tag">{{item.tiqi==1?'配送':'自提'}}</view>
				</view>
				<view class="wdh-100 area-info" v-if="item.tiqi==1">
					{{item.province}}{{item.city}}{{item.district}}{{item.area}}
				</view>
				<view class="rowbox wdh-100 spb">
					<view class="order-num">{{item.qujianma}}</view>
					<!-- 2034-5-22 hdd修改 0全部 2待完成  3已完成 4售后退款 5取消订单 -->
					<view class="mark-title">
						<text v-if="item.status==1">待付款</text>
						<text v-else-if="item.status==2">待收货</text>
						<text v-else-if="item.status==3">已完成</text>
						<text v-else-if="item.status==4">申请退款</text>
						<text v-else-if="item.status==5">已退款</text>
						<text v-else-if="item.status==6">拒绝退款</text>
						<text v-else-if="item.status==7">取消订单</text>
					</view>
				</view>
			</view>
			<view v-for="(goods,indexs) in item.List" :key='indexs' class="rowbox wdh-100 spb one-goods">
				<view class="rowbox wdh-100">
					<image :src="goods.goodimage[0]" mode="aspectFill" class="goods-img"></image>
					<view class="goods-name columnbox als">
						<view class="rowbox spb wdh-100">
							<view>{{goods.goodname}}</view>
							<view class="goods-price">¥{{goods.price}}</view>
						</view>
						<view class="goods-guige">{{goods.guige}} x {{goods.num}}</view>
					</view>
				</view>
			</view>
			<view class="rowbox wdh-100 order-desc user-info">
				<view style="display: flex;flex-direction: column;">
					<view class="" style="display: flex;align-items: center;">
						<text>顾客手机号：</text>
						<text>{{item.phone!=''?item.phone:'无'}}</text>
					</view>
					
					<text>备注：{{item.beizhu!=''?item.beizhu:'无'}}</text>
					<text v-if="item.tiqi==2">自提点：{{item.zitidian}}</text>
				</view>
				<view class="rowbox">
					<!-- <image class="user-img" src="/static/logo.png"></image> -->
					<view class="user-name">{{item.name}}</view>
				</view>
			</view>
			<view v-if="item.status==1" class="wdh-100 rowbox" style="justify-content: flex-end;margin-top: 20rpx;">
				<view @click="finishOrder(item.id)" class="rowbox def-bgcol small-btn">确认提货</view>
			</view>
			<view v-if="item.status==2" class="wdh-100 rowbox" style="justify-content: flex-end;margin-top: 20rpx;">
				<view @click="finishOrder(item.id)" class="rowbox def-bgcol small-btn">取货完成</view>
			</view>
			
			<view class="rowbox wdh-100 order-desc">
				<!-- <view>已收款</view> -->
				<view></view>
				<view class="rowbox">
					共{{item.num}}份商品，合计
					<view class="user-name">¥{{item.orderprice}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 1待付款 2待收货 3已完成 4申请退款 5已退款 6拒绝退款 7取消订单
				// 0全部 2待完成  3已完成 4售后退款 5取消订单 2024-5-22调整
				tablist: [{
						name: '全部',
						value: 0
					},
					{
						name: '待完成',
						value: 2
					},
					{
						name: '已完成',
						value: 3
					},

					{
						name: '售后退款',
						value: 4
					},
					{
						name: '取消订单',
						value: 5
					},
				],
				curtype: 0,
				pageNo: 1,
				totalCount: 0,
				list: [],
				searchflag: false,
				phone: ''
			};
		},
		onReachBottom() {
			if (this.list.length < this.totalCount) {
				this.pageNo++
				this.getList()
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			finishOrder(id) {
				uni.showModal({
					title: '是否确认已取货订单完成',
					success: (res) => {
						if (res.confirm) {
							this.$req.post('/shanghu/orderwc', {
								orderid: id
							}).then(res => {
								this.list = []
								this.pageNo = 1
								this.getList()
							})
						}
					}
				})
			},
			searchInfo() {
				this.pageNo = 1
				this.list = []
				this.getList()
			},
			getList() {
				this.$req.post('/shanghu/orderlist', {
					"shanghuid": uni.getStorageSync('userInfo').shanghuid,
					"status": this.curtype, //2待完成  3已完成   4售后退款 7已取消
					"pageNo": this.pageNo,
					"pageSize": 20,
					"phone": this.phone
				}).then(res => {
					res.data.data.list.forEach(resp => {
						console.log('oooooooooo',resp)
						let num = 0
						if (resp.List) {
							resp.List.forEach(goods => {
								num += goods.num
								goods.goodimage = goods.goodimage.split(',')
							})
						}
						resp.num = num
					})
					this.list = this.list.concat(res.data.data.list);
					
					this.totalCount = res.data.data.totalCount
				})
			},
			changeType(e) {
				this.curtype = e.value
				this.pageNo = 1
				this.list = []
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background: #f6f6f6;
		justify-content: flex-start;
	}

	.top-box {
		background: #fff;
		width: 100%;
		padding: 20rpx 20rpx;
	}

	.search-box {
		width: 100%;
		background: #f6f6f6;
		padding: 20rpx 20rpx;
		border-radius: 10rpx;
		justify-content: flex-start;

		input {
			font-size: 28rpx;
			margin-left: 10rpx;
		}
	}

	.tab-content {
		margin-top: 20rpx;
	}

	.count-title {
		font-size: 28rpx;
		color: #36638f;
		white-space: nowrap;
		background: #fff;
		padding: 0 20rpx;
	}

	.mark-title {
		font-size: 28rpx;
		color: #36638f;
	}

	.time-box {
		width: 710rpx;
		margin-top: 20rpx;
		justify-content: space-between;
		font-size: 24rpx;
		color: #b0afb1;
	}

	.one-box {
		width: 710rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 20rpx 20rpx;
	}

	.order-detail {
		width: 100%;
		background: #f6f6f6;
		padding: 20rpx 20rpx;
		border-radius: 10rpx;
	}

	.daodian-tag {
		background: #dfab49;
		color: #fff;
		font-size: 24rpx;
		line-height: 40rpx;
		padding: 0 10rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.order-num {
		font-size: 40rpx;
		font-weight: bold;
	}

	.order-desc {
		justify-content: space-between;
		margin-top: 32rpx;
		color: #b0afb1;
		font-size: 28rpx;
	}

	.user-info {
		padding-bottom: 32rpx;
		border-bottom: #f6f6f6 solid 1px;
	}

	.user-img {
		width: 40rpx;
		height: 40rpx;
		border-radius: 4rpx;
	}

	.user-name {
		margin-left: 10rpx;
		color: #000;
		font-size: 28rpx;
	}

	.one-goods {
		padding: 20rpx 0;

		.goods-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
		}

		.goods-name {
			margin-left: 20rpx;
			width: calc(100% - 120rpx);
		}

		.goods-guige {
			font-size: 24rpx;
			color: #b0afb1;
			margin-top: 10rpx;
		}

		.goods-price {
			font-size: 24rpx;
		}
	}

	.small-btn {
		color: #fff;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}

	.area-info {
		margin-bottom: 20rpx;
	}
</style>